<%@ include file="/WEB-INF/views/common/includes.jsp"%>
<section class="panel">
	<div class="panel-heading" style="padding: 8px 10px">
		<b>Advanced Search Results</b> with the following keywords:
		<c:forEach var="keyword" items="${keywords}">
			<c:out value="${keyword} " />
		</c:forEach>
	</div>

	<section class="panel">
		<div class="panel-body">
			<c:if test="${not empty recipes}">
				<c:forEach var="recipe" items="${recipes}">
					<section class="panel">
						<div class="panel-body">
							<div class="col-lg-6">
								<c:url var="goToRecipe"
									value="/recipe/recipeInfo?recipeId=${recipe.id}"></c:url>
								<a href="<c:out value="${goToRecipe}"/>"> <img
									src="/recipe/picture/${recipe.id}_medium" width="100%"
									style="height: 350px" alt="Recipe_Image"></a>
							</div>
							<div class="col-lg-6 font-bold">
								<div class="row" style="margin-bottom: 50px">
									<div class="panel-header">
										<c:url var="goToRecipe"
											value="/recipe/recipeInfo?recipeId=${recipe.id}"></c:url>
										<a href="<c:out value="${goToRecipe}"/>"><c:out
												value="${recipe.recipe_name}" /></a>
									</div>
								</div>
								<%-- <div class="row" style="margin-bottom: 20px">
												<div class="panel-header font-bold"
													style="margin-bottom: 10px">
													<strong>Tags</strong>
												</div>
												<div class="panel" style="padding: 7px">
													<c:out value="${recipe.tags}" />
												</div>
											</div> --%>
								<div class="row">
									<div class="panel-header font-bold" style="margin-bottom: 30px">
										<strong>Preparation</strong>
									</div>
									<div class="panel" style="padding: 7px">
										<c:out value="${recipe.description}" />
									</div>
								</div>
							</div>
						</div>

						<footer class="panel-footer">
							<div class="row" style="margin-left: 0px">
								<div class="col-sm-12">
									<div style="float: left; margin-bottom: 15px">
										<i class="icon-time"></i> <strong>Cook Time:</strong>
										${recipe.cook_time}<strong style="margin-right: 75px">
											Minutes</strong>
									</div>
									<div style="float: left; margin-bottom: 15px">
										<i class="icon-time"></i> <strong>Preparation Time:</strong>${recipe.prep_time}<strong
											style="margin-right: 75px"> Minutes</strong>
									</div>

									<div style="float: left; margin-bottom: 15px">
										<i class="icon-time"></i> <strong>Total Time:</strong> <strong
											style="margin-right: 75px">
											<%-- ${recipe.total_time}  --%>Minutes
										</strong>
									</div>
								</div>
								<div class="row" style="margin-bottom: 15px">
									<div class="col-sm-12">

										<div class="col-sm-7">
											<strong style="float: left">RATE:</strong>

											<div style="float: left"
												data-bind="foreach: new Array(full(${recipe.rate}))">
												<i class="icon-star"></i>
											</div>
											<div style="float: left"
												data-bind="foreach: new Array(half(${recipe.rate}))">
												<i class="icon-star-half-empty"></i>
											</div>
											<div style="float: left; margin-right: 5px"
												data-bind="foreach: new Array(empty(${recipe.rate}))">
												<i class="icon-star-empty"></i>
											</div>

											<p id="rate" style="display: none">${recipe.rate}</p>
											<strong>${recipe.rate}</strong> <strong>/5</strong>
										</div>
									</div>
									<div class="col-sm-2" style="padding-right: 0px; float: left">
										<strong>${recipe.rating_count}</strong> person voted!
									</div>
								</div>
								<div class="col-lg-12">
									<c:url var="thisURL" value="publicProfile">
									</c:url>
									<a
										href="<c:out value="${thisURL}?username=${recipe.recipe_owner}"/>">by
										${recipe.recipe_owner}</a>
								</div>
						</footer>

					</section>
				</c:forEach>
			</c:if>
		</div>
	</section>
	<script>
	
	    var total = parseInt()+parseInt()
		var full = function(rate) {
			console.log(rate);
			return parseInt(rate);
		}

		var half = function(rate) {
			if (rate == parseInt(rate)) {
				return 0;
			} else {
				return 1;
			}
		}

		var empty = function(rate) {
			return parseInt(5 - rate);
		}
		
		
		var StarViewModel = function() {

		};

		ko.applyBindings(new StarViewModel());
		
		function calc(A,B,SUM) {
			  var one = document.getElementById(A).value;
			  var two = document.getElementById(B).value; 
			  document.getElementById(SUM).value = parseInt(one) + parseInt(two);
		}
	</script>
</section>
